<template>
  <view class="big">
    <lunc-calendar ref="cale"  :showShrink="true"  @dayChange="queryday" ></lunc-calendar>
   <view class="content">
       <view class="startwork flex">
        <view class="left">{{daylist[0].signInBeginTime?daylist[0].signInBeginTime:''}}</view>
        <view class="right">
            <view class="right-t">上班</view>
            <view class="right-b">{{daylist[0].signInTime?daylist[0].signInTime:''}}</view>
        </view>
       </view>
       <view class="line"></view>
       <view class="endwork flex">
        <view class="left">{{daylist[0].signOutEndTime?daylist[0].signOutEndTime:''}} </view>
        <view class="right">
            <view class="right-t">下班</view>
            <view class="right-b">{{daylist[0].signOutTime?daylist[0].signOutTime:''}}</view>
        </view>
       </view>
   </view>
   <view class="ask flex" v-if="daylist[0].leaveHourSum">请假小时数:
        <view class="hour">{{ daylist[0].leaveHourSum }}</view>
        <view>小时</view>
    </view>
  </view>
</template>

<script>
import { detail,month} from "@/service/api/attendance";
export default {
    data() {
        return {
            year:'',
            month:'',
            day:'',
            userId:'',
            daylist:[]
        }
    },
    created(){

    },
    mounted(){
        const date = {
            day:this.day,
            month:this.month,
            year:this.year
        }
        console.log(this.$refs.cale)
        this.$refs.cale.setDate(date)
    },
    onLoad(option){
        console.log(option,'参数');
        this.userId=option.userId>>0
        this.year=option.year>>0
        this.month=option.month>>0
        let year=new Date().getFullYear()
		let month=new Date().getMonth()+1
        console.log(year,this.year,month,this.month,'================');
        if (year===this.year&&month==this.month) {
            this.day=new Date().getDate()
        }else{
            this.day=1
        }
        const date=this.year+'-'+this.month+'-'+this.day
        this.queryday({date:date,year:this.year,month:this.month,day:this.day})
    },
    methods: {
        queryday(val){
            console.log(val,'---------------');
            const data={
                userId:this.userId,
                year:val.year,
                month:val.month,
                day:val.day,
            }
            detail(data).then(res=>{
                if (res.status===200) {
                    this.daylist=res.data
                    uni.showToast({
                                title:res.msg,
                                icon:'none'
                                })
                }else{
                    uni.showToast({
                                title:res.msg,
                                icon:'none'
                                })
                }
            }).catch(err=>{
                uni.showToast({
                                title:err.msg,
                                icon:'none'
                                })
            })
        },
    },
}
</script>

<style lang="scss" scoped>
.big{
    width: 100vw;
    height: 100vh;
    .content{
		margin: 20rpx;
        .startwork{
			font-size: 20px;
			font-weight: bold;
			.left{
                display: flex;
				align-items: center;
                min-width: 140rpx;
                min-height: 120rpx;
			}
			.right{
				margin-left: 20rpx;
				.right-t{
					
				}
				.right-b{
					font-weight: normal;
					margin-top: 20rpx;
				}
			}
        }
        .line{
            width: 1rpx;
            height: 100rpx;
            margin-left: 60rpx;
            border-left: 4rpx rgba(128, 128, 128,.5) solid;
        }
        .endwork{
			font-size: 20px;
			font-weight: bold;
			.left{
                display: flex;
				align-items: center;
                min-width: 140rpx;
                min-height: 120rpx;
			}
			.right{
				margin-left: 20rpx;
				.right-t{
					
				}
				.right-b{
					font-weight: normal;
					margin-top: 20rpx;
				}
			}
        }
    }
    .ask{
        margin: 20rpx;
        .hour{
            font-weight: bold;
            margin-left: 20rpx;
        }
    }
}
    
</style>